<template>
  <u-tabbar
    :value="current"
    :fixed="true"
    :placeholder="true"
    @change="onChange"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :key="index"
      :text="item.text"
    >
      <template #active-icon>
        <image
          :src="item.selectedIconPath"
          mode="aspectFit"
          style="width: 44rpx; height: 44rpx;"
        />
      </template>
      <template #inactive-icon>
        <image
          :src="item.iconPath"
          mode="aspectFit"
          style="width: 44rpx; height: 44rpx;"
        />
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>

export default {
  name: 'CustomTabbar',
  data() {
    return {
      current: 0,
      activeColor: '#2979ff',
      inactiveColor: '#909399',
      tabList: [
        {
          pagePath: '/pages/index/index',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home_focus.png',
          text: '首页',
          name: 'index',
          auth: false
        },
        {
          pagePath: '/pages/device/index',
          iconPath: '/static/tabbar/device.png',
          selectedIconPath: '/static/tabbar/device_focus.png',
          text: '设备',
          name: 'device',
          auth: false
        },
        {
          pagePath: '/pages/activity/index',
          iconPath: '/static/tabbar/activity.png',
          selectedIconPath: '/static/tabbar/activity_focus.png',
          text: '活动',
          name: 'activity',
          auth: false
        },
        {
          pagePath: '/pages/mine/index',
          iconPath: '/static/tabbar/mine.png',
          selectedIconPath: '/static/tabbar/mine_focus.png',
          text: '我的',
          name: 'mine',
          auth: true
        }
      ]
    }
  },
  created() {
    // 初始化时设置一次
    this.updateCurrentTab()
  },
  methods: {
    // 更新当前选中的tab
    updateCurrentTab() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const route = `/${currentPage.route}`
      const index = this.tabList.findIndex(item => item.pagePath === route)
      if (index > -1) {
        this.current = index
      }
    },
    // 处理tab切换
    async onChange(index) {
      const item = this.tabList[index]
      
      // 如果是当前页面，不做跳转
      if (this.current === index) return
      
      // 检查是否需要登录
      if (item.auth && !this.$store.getters.hasLogin) {
        uni.showModal({
          title: '提示',
          content: '该功能需要登录后使用',
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/login/index'
              })
            }
          }
        })
        return
      }

      try {
        // 触发页面切换前的钩子，等待异步结果
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        if (currentPage && currentPage.$vm && typeof currentPage.$vm.beforeTabSwitch === 'function') {
          const canSwitch = await currentPage.$vm.beforeTabSwitch({ 
            from: this.current, 
            to: index 
          })
          if (canSwitch === false) return
        }
        
        // 切换页面
        uni.switchTab({
          url: item.pagePath
        })
      } catch (error) {
        console.error('Tab切换异常:', error)
      }
    }
  }
}
</script> 